<template>
  <div class="leave-type-setting">
    <h3>假期类型</h3>
    <el-card class="setting-card">
      <div slot="header" class="card-header">
        <span>假期类型列表</span>
        <el-button type="primary" size="small" @click="handleAddLeaveType">新建假期类型</el-button>
      </div>
      <el-table :data="leaveTypes" border style="width: 100%">
        <el-table-column prop="name" label="假期类型名称" width="180">
          <template slot-scope="scope">
            <el-input v-if="scope.row.isEditing" v-model="scope.row.name" placeholder="请输入假期类型名称" />
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="时长单位" width="120">
          <template slot-scope="scope">
            <el-select v-if="scope.row.isEditing" v-model="scope.row.unit" placeholder="请选择">
              <el-option label="天" value="day" />
              <el-option label="小时" value="hour" />
            </el-select>
            <span v-else>{{ scope.row.unit === 'day' ? '天' : '小时' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="balanceLimit" label="余额限制" width="120">
          <template slot-scope="scope">
            <el-input-number
              v-if="scope.row.isEditing"
              v-model="scope.row.balanceLimit"
              :min="0"
              :max="999"
              size="small"
            />
            <span v-else>{{ scope.row.balanceLimit }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isEnabled" label="启用状态" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isEnabled" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.isEditing"
              type="success"
              size="mini"
              @click="handleSaveLeaveType(scope.row)"
            >保存</el-button>
            <el-button
              v-if="scope.row.isEditing"
              type="info"
              size="mini"
              @click="handleCancelEdit(scope.row)"
            >取消</el-button>
            <el-button
              v-else
              type="primary"
              size="mini"
              @click="handleEditLeaveType(scope.row)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="handleDeleteLeaveType(scope.$index)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'LeaveTypeSetting',
  data() {
    return {
      leaveTypes: [
        {
          name: '年假',
          unit: 'day',
          balanceLimit: 15,
          isEnabled: true,
          isEditing: false
        },
        {
          name: '事假',
          unit: 'day',
          balanceLimit: 30,
          isEnabled: true,
          isEditing: false
        },
        {
          name: '病假',
          unit: 'day',
          balanceLimit: 60,
          isEnabled: true,
          isEditing: false
        }
      ]
    }
  },
  methods: {
    handleAddLeaveType() {
      this.leaveTypes.unshift({
        name: '',
        unit: 'day',
        balanceLimit: 0,
        isEnabled: true,
        isEditing: true
      })
    },
    handleEditLeaveType(row) {
      row.isEditing = true
    },
    handleSaveLeaveType(row) {
      if (!row.name) {
        this.$message.warning('请输入假期类型名称')
        return
      }
      row.isEditing = false
      this.$message.success('保存成功')
    },
    handleCancelEdit(row) {
      if (!row.name) {
        const index = this.leaveTypes.findIndex(item => item === row)
        this.leaveTypes.splice(index, 1)
      } else {
        row.isEditing = false
      }
    },
    handleDeleteLeaveType(index) {
      this.$confirm('确认删除该假期类型？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.leaveTypes.splice(index, 1)
        this.$message.success('删除成功')
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.leave-type-setting {
  padding: 20px;
}

.setting-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-input-number {
  width: 100%;
}
</style>